<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">巡查列表</view>
			<view class="right">{{ date }}</view>
		</view>
		<view class="body">
			<view class="search">
				<view class="card" :style="{height: searchHeight+'upx'}">
					<view class="title flex-row">
						<view class="name">{{ name }}</view>
						<view>管控层级:{{ levels.length }}级</view>
						<view>人次:{{ times }}人</view>
					</view>
					<view v-for="(item, index) in info" :key="index" class="title flex-row">
						<view>巡检人员：{{ item.username }}</view>
						<view>{{ item.cycle_day }}天{{ item.cycle_num }}次</view>
					</view>
				</view>
				<view class="item flex-row">
					<input type="text" v-model="title" placeholder="风险点名称" />
					<button type="primary" @click="filterList">查询</button>
				</view>
				<view class="item flex-row tabs">
					<view @click="changeTab(0)" class="tab" :class="{active: tabIndex == 0}">全部</view>
					<view @click="changeTab(1)" class="tab" :class="{active: tabIndex == 1}">已巡检</view>
					<view @click="changeTab(2)" class="tab" :class="{active: tabIndex == 2}">已超期</view>
				</view>
			</view>
			<scroll-view v-if="list.length" class="scroll">
				<view v-for="(item, index) in list" :key="index">
					<!--已巡检列表-->
					<view v-show="tabIndex == 1 && item.xj_status == 'check'" class="card flex-row">
						<view class="left">
							<view class="leader">责任人：{{ item.username || '无' }}</view>
							<view class="time">起始时间：{{ item.from_day || '无' }}</view>
							<view class="time">截至时间：{{ item.last_day || '无' }}</view>
							<view class="time">巡检时间：{{ item.check_time || '无' }}</view>
						</view>
						<view class="right flex-column">
							<view class="btn">已巡检</view>
						</view>
					</view>
					<!--已超期列表-->
					<view v-show="tabIndex == 2 && item.xj_status == 'cq'" class="card flex-row">
						<view class="left">
							<view class="leader">责任人：{{ item.username || '无' }}</view>
							<view class="time">起始时间：{{ item.from_day || '无' }}</view>
							<view class="time">截至时间：{{ item.last_day || '无' }}</view>
							<view class="time">巡检时间：{{ item.check_time || '无' }}</view>
						</view>
						<view class="right flex-column">
							<view class="btn">提醒</view>
							<view class="btn error">已超期</view>
						</view>
					</view>
					<!--全部列表-->
					<view v-show="tabIndex == 0" class="card flex-row">
						<view class="left">
							<view class="leader">责任人：{{ item.username || '无' }}</view>
							<view class="time">起始时间：{{ item.from_day || '无' }}</view>
							<view class="time">截至时间：{{ item.last_day || '无' }}</view>
							<view class="time">巡检时间：{{ item.check_time || '无' }}</view>
						</view>
						<view class="right flex-column">
							<view v-if="item.xj_status != 'check'" @click.stop.prevent="remind(item.id)" class="btn">提醒</view>
							<view v-if="item.xj_status == 'cq'" class="btn error">已超期</view>
							<view v-if="item.xj_status == 'check'" class="btn">已巡检</view>
						</view>
					</view>
				</view>
				<view class="nodata">没有更多了~</view>
			</scroll-view>
			<view v-else class="nodata">没有更多了~</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
const YEAR_LENGTH = 4;	// 连续显示的年份数量,5年
const HEAD_HEIGHT = 46;	// 头部高度默认值
export default{
	components: { uniIcons },
	data(){
		return {
			tabIndex: 0,
			date: '',
			name: '',
			title: '',
			times: 1,
			levels: [],
			searchHeight: HEAD_HEIGHT,
			search: {
				position_id: '',
				username: '',
				userid: uni.getStorageSync('userid')
			},
			info: [],
			list: [],
			originList: []
		}
	},
	onLoad(option){
		this.date = option.date;
		this.name = option.name;
		this.search.position_id = option.id;
		this.getList();
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		// 检索
		filterList(){
			this.list = this.originList.filter(item=>item.title.indexOf(this.title) >= 0);
		},
		// 切换tab
		changeTab(index){
			this.tabIndex = index;
		},
		// 提醒
		remind(id){
			uni.showModal({
				title: '提示',
				content: '是否提醒',
				success: (res)=>{
					if(res.confirm){
						uni.request({
							method: 'POST',
							url: this.$API.dangerNotice,
							header: this.$API.get_head(),
							data: {id},
							success: (res)=>{
								uni.showToast({
									icon: 'none',
									title: res.data.message
								})
							}
						})
					}
				}
			})
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: _this.$API.patrolList,
				data: _this.search,
				header: _this.$API.get_head(),
				success: (res)=>{
					_this.originList = JSON.parse(JSON.stringify(res.data.data.logs));
					_this.list = res.data.data.logs;
					_this.info = res.data.data.mission;
					
					// 处理头部卡片高度问题
					_this.times = _this.info.length;
					_this.searchHeight = HEAD_HEIGHT + _this.times*50;
					
					// 统计管理层级
					_this.info.map(item=>{
						if(_this.levels.indexOf(item.level) < 0) _this.levels.push(item.level);
					});
				}
			})
		},
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
}
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}
.body{
	height: calc(100vh - var(--status-bar-height) - 88upx);
	background: #F0F0F0;
	padding: 20upx 20upx 0;
	box-sizing: border-box;
	overflow-y: auto;
}

.card{
	height: 174upx;
	background: #fff;
	margin-bottom: 16upx;
	border-radius: 16upx;
	padding: 14upx 20upx 20upx;
	box-shadow: 0 2upx 4upx #DEDEDE;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	font-size: 28upx;
	/* width: calc((100% - 100upx) / 2); */
}
.card .title view.name{
	text-indent: 16upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #179DFE;
	border-radius: 6upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .right{
	width: 200upx;
	align-items: flex-end;
}
.card .right .btn{
	color: #fff;
	width: 150upx;
	padding: 6upx 0;
	font-size: 26upx;
	border-radius: 40upx;
	background: #87CFFF;
	text-align: center;
}
.card .right .btn.error{
	background: #F98202;
}
.card .right .btn:first-child{
	margin-bottom: 20upx;
}
.card .left{
	width: calc(100% - 200upx);
}
.card .left .leader{
	color: #333;
	font-size: 30upx;
	font-weight: bold;
}
.card .left .time{
	color: #999;
	font-size: 26upx;
	line-height: 1.8;
}

.search .item{
	height: 80upx;
	line-height: 80upx;
	background: #fff;
	border-radius: 10upx;
	margin-bottom: 16upx;
	padding: 0 12upx;
}
.search .item input{
	color: #A3A3A3;
	font-size: 28upx;
	text-align: center;
	background: #F0F0F0;
	border-radius: 10upx;
	border: 2upx solid #509EC5;
	width: calc(100% - 120upx);
	height: 56upx;
}
.search .item button{
	font-size: 26upx;
	line-height: 2.3;
	width: 112upx;
	margin-left: 8upx;
	background-color: #1692DC;
}
.search .item.tabs{
	justify-content: space-around;
}
.search .item.tabs .tab{
	height: 80upx;
	line-height: 80upx;
}
.search .item.tabs .tab.active{
	color: #1692DC;
	position: relative;
}
.search .item.tabs .tab.active::after{
	content: '';
	width: 160%;
	height: 4upx;
	background: #1692DC;
	position: absolute;
	bottom: 0;
	left: -30%;
}

.search .card{
	height: 46upx;
}
.search .card .title view:last-child{
	text-align: right;
}
.search .card .title:last-child view{
	width: 50%;
}
</style>
